<template>
    <div class="Myfriend">
        <div class="Myfriend-head">
            <span>我的好友</span>
        </div>
        <div class="Myfriend-conetnt">
            <ul>
                <li>
                    <label class="onlien_status">
                        <span>在线</span>
                    </label>
                    <label class="acvtor">
                        <img src="/images/图层 9.png" alt="">
                        <!-- <span></span> -->
                    </label>
                    <label class="nick_names">
                        <span>大木</span>
                    </label>
                    <label class="citys">
                        <span>中国台湾/高雄市</span>
                    </label>
                    <label class="Airbubbles">
                        <img src="/images/组 7@2x.png" alt="">
                    </label>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import TIM from 'tim-js-sdk';
let options = {
  SDKAppID: 1400255047 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
export default {
    name:'Myfriend',
    data(){
        return{
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            userSig:JSON.parse(localStorage.getItem('userSign')),
        }
    },
    mounted(){
        this.Getallfriends()
    },
    methods:{
        Getallfriends(){
            var _this = this
            var options = {
				user_id: this.unserinfo.user_id,
                status:2,
            };
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/message/messageFriend/queryManagerListPage',
                params:options,
            }).then((res)=>{
                
            }).catch((err)=>{
                console.log(err)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .Myfriend{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Myfriend-head{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 2px solid #47CECF;
        margin: 0 auto;
        display: flex;
        align-items: center;
        span{
            border-left: 14px solid #47CECF;
            color: #2DC7C8;
            font-size: 20px;
            font-weight: bold;
            width: 40%;
            padding-left: 1%;
        }
    }
    .Myfriend-conetnt{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Myfriend-conetnt>ul{
        list-style: none;
        width: 100%;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 15%;
            height: 200px;
            background:rgba(245,245,245,1);
            border-radius:15px;
            margin-top: 20px;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            &:first-child{
                margin-left: 0;
            }
        }
    }
    .onlien_status{
        justify-content: flex-end!important;
        width: 90%!important;
        height: 30px;
        margin-top: 6px;
        span{
            color: #2DC7C8;
            font-size: 12px;
        }
    }
    .Myfriend-conetnt>ul>li>label{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .nick_names{
        span{
            color: #383838;
            font-size: 16px;
            font-weight: bold;
        }
    }
    .citys{
        span{
            color: #383838;
            font-size: 12px;
        }
    }
    .acvtor{
        img{
            width: 50px;
            border-radius: 20px;
        }
    }
    .Airbubbles{
        cursor: pointer;
        height: 40px;
        img{
            width: 25px;
        }
    }
</style>    